<template>
  <div>
    <!-- 位置栏 -->
    <div class="location-bar">
      <div>位置 :&ensp;</div>
      <div>一级页面</div>
      <div style="color: #000">/二级页面</div>
    </div>
    <!-- 查询框 -->
    <div class="search-bar">
      <a-form-model layout="inline" :model="searchForm" @submit="searchSubmit" @submit.native.prevent>
        <a-form-model-item label="姓名/电话:">
          <a-input v-model="searchForm.searchText" placeholder="请输入" />
        </a-form-model-item>
        <a-form-model-item label="解决方案名称:">
          <a-input v-model="searchForm.solutionName" placeholder="请输入" />
        </a-form-model-item>
        <a-form-model-item label="提交日期:">
          <a-range-picker valueFormat="yyyy-MM-DD HH:mm:ss" v-model="searchForm.dateRange" />
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <!-- 内容框 -->
    <div class="content-box">
      <!-- 导出 -->
      <a-button type="primary" @click="takeout"> 导出 </a-button>
      <!-- 表格 -->
      <a-table
        :columns="columns"
        :data-source="data"
        @change="handleTableChange"
        :pagination="pagination"
        :rowKey="(columns) => columns.id"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="lookover(record)">查看</a>
          <a-divider type="vertical" />
          <a @click="del(record)"> 删除 </a>
        </span>
      </a-table>
    </div>
    <!-- 抽屉 -->
    <a-drawer title="咨询详情" placement="right" :closable="true" :visible="check" :width="600" @close="onClose">
      <div class="title">{{ checks.solutionName }}</div>
      <div class="information">
        <div>
          <div>姓名：{{ checks.name }}</div>
          <div style="margin-top: 40px">电话：{{ checks.phone }}</div>
        </div>
        <div>
          <div>所在地：{{ checks.location }}</div>
          <div style="margin-top: 40px">院校/企业名称{{ checks.companyName }}</div>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
/**表头信息 */
const columns = [
  {
    title: '解决方案名称',
    dataIndex: 'solutionName',
    key: 'solutionName',
    scopedSlots: { customRender: 'solutionName' },
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
    scopedSlots: { customRender: 'phone' },
  },
  {
    title: '所在地',
    key: 'location',
    dataIndex: 'location',
    scopedSlots: { customRender: 'location' },
  },
  {
    title: '院校/企业名称',
    key: 'companyName',
    dataIndex: 'companyName',
    scopedSlots: { customRender: 'companyName' },
  },
  {
    title: '提交时间',
    key: 'created',
    dataIndex: 'created',
    scopedSlots: { customRender: 'created' },
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
  },
];
export default {
  data() {
    return {
      columns,
      data: [], //列表
      searchForm: { dateRange: ['', ''], searchText: '', solutionName: '' }, //查询参数
      pagination: { pageSize: 10, total: 100, pageNum: 1, showSizeChanger: true }, //分页参数
      del_id: '', //删除id
      check: false,
      checks: [],
      selectedRowKeys: [],
      ex_id: [], //导出id
    };
  },
  created() {
    this.loadArticleList();
  },
  methods: {
    //查询列表
    async loadArticleList() {
      let reqData = { searchText: this.searchForm.searchText, solutionName: this.searchForm.solutionName, startTime: this.searchForm.dateRange[0], endTime: this.searchForm.dateRange[1] };
      let reqParam = { pageNumber: this.pagination.pageNum, pageSize: this.pagination.pageSize };
      let searchUrl = `/consult/search/${reqParam.pageNumber}/${reqParam.pageSize}`;
      let result = await this.axios.post(searchUrl, reqData);
      // console.log(result);
      this.data = result.data.data;
      this.pagination.total = result.data.total; //总数
      console.log(this.data);
      this.search_empty();
    },
    //删除
    async deleteList() {
      let reqData = {};
      let reqParam = { id: this.del_id };
      let deleteUrl = `/consult/delete/${reqParam.id}`;
      let result = await this.axios.delete(deleteUrl, reqData);
      console.log(result);
      this.loadArticleList();
    },
    //导出
    toExcel() {
      window.open(`${this.serverUrl}consult/to_excel?consultsIds=${this.ex_id}`);
    },
    //分页
    handleTableChange(pagination) {
      this.pagination.pageNum = pagination.current;
      this.loadArticleList();
    },
    //搜索
    searchSubmit() {
      // console.log(this.searchForm);
      this.loadArticleList();
    },
    //清空搜索
    search_empty() {
      this.searchForm.dateRange = ['', ''];
      this.searchForm.searchText = '';
      this.searchForm.solutionName = '';
    },
    //删除
    del(record) {
      // console.log(record);
      this.del_id = record.id;
      this.deleteList();
    },
    //导出
    takeout() {
      this.ex_id = this.selectedRowKeys;
      console.log(this.ex_id);
      this.selectedRowKeys=[];
      this.toExcel();
    },
    //查看
    lookover(record) {
      this.check = true;
      this.checks = record;
      console.log(this.checks);
    },
    //关闭
    onClose() {
      this.check = false;
      this.checks = [];
    },
    //多选
    onSelectChange(selectedRowKeys) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
  },
};
</script>

<style>
.location-bar {
  display: flex;
  font-size: 14px;
  color: #88898b;
}
.search-bar {
  width: 100%;
  height: 80px;
  background-color: #ffffff;
  margin-top: 17px;
  box-sizing: border-box;
  padding: 20px 30px;
}
.content-box {
  width: 100%;
  background-color: #ffffff;
  margin-top: 20px;
  box-sizing: border-box;
  padding: 20px 30px;
}
.title {
  padding-left: 20px;
  font-size: 25px;
  color: blue;
  border-left: 5px solid blue;
}
.information {
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
}
</style>